<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>/* 练习：1.圆形  2.正三角形
				 思路1：宽高与变宽倒角一致
				 
				*/
			   div#circle{
				   width: 200px;
				   height: 200px;
				   border: 1px solid lightblue;
				   border-radius: 50%;
				   /* 边框阴影 box-shadow  属性 */
				   box-shadow:5px 5px 50px 30px skyblue inset;
			   }
			   /* 思路2：div#triangle   css中：抓到div
			                    左边框：50像素实现红色
			   				 右边框：50像素实现黄色
			   				 下边框：50像素实现黑色
			   注意：先别加宽高  transparent		透明色	 */	 
			   div#triangle{
				   width: 0;
				   border-left: 50px solid transparent;
				   border-right: 50px solid transparent;
				   border-bottom: 50px solid black;
				   
			   }
			   /* 两行：倒三角，蓝色，透明度 .3 */
			   div#triangle1{
				   width: 0;
				   border: 50px solid transparent;
				   border-top-color: rgba(85, 255, 255, 0.3);
				  
			   }
			   /* outline  边框轮廓   只针对input  元素 */
			   input{
			   		outline: 1px solid red;
			   }
			   /* 实际应用：统配选择器 去掉轮廓 
			   {outline 0;}
			   */
			   
			  
		</style>
	</head>
	<body>
		<div id=circle></div>
		<div id="triangle"></div>
		<div id="triangle1"></div>
		边框 <input type="text">
	</body>
</html>